<template>
  <div class="step-container">
    <Atable :tableData="tableData" :tableModel="tableModel">
      <template #index="{ row, index }">
        <span :class="['index', { required: row.required == '1' }]">{{
          index + 1
        }}</span>
      </template>
      <template #down="{ row }">
        <span
          class="down"
          v-if="row.temDownloadUrl"
          @click="down(row.temDownloadUrl.fileUri)"
          >{{ row.temDownloadUrl.fileName }}</span
        >
        <span v-else>无模板</span>
      </template>
      <template #actions="{ row, index }">
        <BtnUpload
          v-model="tableData[index].file"
          class="btn-upload"
          businessTable="TB_APPLY"
          :businessId="id"
          :subType="row.id"
          :accept="'.pdf,.jpg,.png,.jpeg'"
          :disabled="disabled"
          :tip="disabled ? undefined :'请上传pdf或图片格式文件'"
        />
      </template>
    </Atable>
  </div>
</template>
<script>
import Atable from '@/components/Table/Atable';
import BtnUpload from '@/components/Upload/BtnUpload';
import businessApi from '@/api/business';
export default {
  props: {
    bussType: {
      type: String || Number,
    },
    id: {
      type: String,
    },
    disabled: {
      default: false,
    },
  },
  components: {
    Atable,
    BtnUpload,
  },
  data() {
    return {
      searchData: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
    };
  },
  computed: {
    // table fields
    tableModel() {
      return [
        {
          prop: 'index',
          label: '序号',
          slot: 'index',
          width: 80,
        },
        {
          prop: 'ruleName',
          label: '提交材料名称',
        },
        {
          prop: 'copyOrOri',
          label: '原件/复印件',
          render: (row) => this.$dict('copy_or_ori').get(row.copyOrOri),
        },
        {
          prop: 'fileType',
          label: '提交材料类型',
          render: (row) => this.$dict('file_type').get(row.fileType),
        },
        {
          label: '备注',
          prop: 'remarks',
          width: '200',
        },
        {
          prop: 'down',
          label: '模板下载',
          slot: 'down',
        },
        {
          prop: 'actions',
          label: '上传材料',
          slot: 'actions',
        },
      ];
    },
  },
  mounted() {
    this.getTable();
  },
  methods: {
    // 获取表格数据
    async getTable() {
      let params1 = {
        ...this.searchData,
        bussType: this.bussType,
      };
      let params2 = {
        businessTable: 'TB_APPLY',
        businessId: this.id,
      };
      this.$emit('loading', true);
      const [res1, res2] = await Promise.all([
          // 附件配置
        businessApi.getFileRule(params1),
        // 附件列表
        businessApi.getFileList(params2),
      ]);
      const fileObj = {};
      res2.forEach((item) => {
        fileObj[item.subType] = fileObj[item.subType] ? [...fileObj[item.subType], item] : [item];
      });
      this.tableData = res1.records.map((item) => {
        return {
          ...item,
          file: fileObj?.[item.id] ?? [],
        };
      });
      this.$emit('loading', false);
    },
    // 下载模板
    down(fileUri) {
      window.open(fileUri);
    },
    // 提交申请
    apply(row) {
      console.log(row);
      this.$router.push('/personalApplyStep');
    },
    // 校验表格
    validTable() {
      let result;
      this.tableData.forEach((item) => {
        if (item.required=='1' && !(item.file.length > 0)) {
          result = true;
        }
      });
      result && this.$message.warning('请完善上传材料');
      return result;
    },
  },
};
</script>
<style lang="scss" scoped>
.step-container {
  margin-top: 30px;
  width: 100%;
  .down {
    color: #3c8cf1;
    cursor: pointer;
  }
  .btn-upload {
    align-items: center;
  }
}
.required::after {
  position: absolute;
  content: '*';
  color: #f23030;
  margin-left: 2px;
}
</style>
